<template>
	<div class="file-manager-warp">
		<div class="header">
			<el-upload :plain="true" :action="uploadUrl" :data="updloadData" :show-file-list="false" :before-upload="onProgress" :on-success="onSuccess" :accept="accept" multiple>
				<el-button size="mini" type="primary">{{uploading?'正在上传':'点击上传'}}</el-button>
			</el-upload>
			<div class="search-wrap">
				<el-input size="mini" placeholder="模糊搜索" class="input-with-select" v-model='inputData'>
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
					<el-button size="mini" slot="append" icon="el-icon-search"></el-button>
				</el-input>
			</div>
		</div>
		<file-table />
		<div class="footer">
			<el-button type="primary" @click="handleConfirm">确定</el-button>
			<el-button type="default" @click="quxiaoConfirm">取消</el-button>

		</div>
	</div>
</template>

<script>
	import fileTable from './files-table'
	import { getToken } from '@/utils'
	import urls from '@/api'
	export default {
		name: 'file-manager',
		components: {
			fileTable
		},
		props: {
			type: {
				type: [String, Number],
				default() {
					return 2
				}
			}
		},
		data() {
			return {
				loading:'',
				inputData: '',
				updloadData: {},
				uploadUrl: urls.uploadFile,
				sType: this.type,
				uploading: false,
				accept: ''
			}
		},
		watch: {
			type(v1, v2) {
				if(v1) {
					if(v1 === 1) { //视频
						this.accept = '.WMV,.wmv,.mp4,.avi,.flv,.mkv'
					}
					if(v1 === 2) { //图片
						this.accept = '.jpg,.png,.gif '
					}
					if(v1 === 4) { //背景音乐
						this.accept = '.MP3,.mp3'
					}
					if(v1 === 3) { //文档
						this.accept = '.doc,.docx,.ppt,.pptx,.xls,.xlsx,.pdf,.txt'
					}
					this.sType = v1
					this.setUpdateData()
				}
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.setUpdateData()
			})
		},
		methods: {

			setUpdateData() {
				const token = getToken()
				this.updloadData = {
					token,
					type: this.sType,
					uploadFrom: 1
				}
			},
			onProgress() {
				this.uploading = true;
				this.loading=this.$loading({
					lock: true,
					text: '图片上传中……',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
			},
			onSuccess() {
				this.uploading = false;
				this.$emit('on-upload');
				this.loading.close();
				this.$message({
					message: '图片上传成功！',
					type: 'success'
				});
			},
			handleConfirm() {
				this.$emit('on-confirm')
			},
			quxiaoConfirm() {
				this.$emit('quxiaoConfirm')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.file-manager-warp {
		padding: 0 20px 20px 20px;
		display: flex;
		flex-direction: column;
		position: relative;
		.search-wrap {
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.header {
			width: 100%;
			max-height: 80px;
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.earch-wrap {
				display: flex;
				flex-direction: row;
				height: 40px;
				position: relative;
			}
		}
		.footer {
			width: 100%;
			margin: 20px 20px 20px auto;
			display: flex;
			flex-direction: row;
			justify-content: flex-end
		}
	}
</style>
